import { PropType, defineComponent, ref } from 'vue';
import styles from './index.module.scss';
import CompareControl from '../editTextarea/compareControl';
import {
  ModeEnum,
  OutputFormatEnum,
  LanguageEnum
} from '../../data/type';
import Dialog from '../dialog';

export default defineComponent({
  name: 'YxpDiffCompare',
  props: {
    /**
     * 模式
     * 字符 => char,
     * 单词 => word,
     * 图像 => image,
     * 文件 => file
     */
    mode: {
      type: String as PropType<ModeEnum>,
      default: ModeEnum.WORD
    },
    /**
     * 是否以弹窗模式展示内容
     */
    dialog: {
      type: Boolean,
      default: false
    },
    /**
     * 此属性被赋值的话，则代表是以接口的形式赋值，不开放EditDiv
     */
    value: {
      type: Object as PropType<{
        before: string,
        after: string
      }>,
      default: () => null
    },
    /**
     * 输出格式：只在mode为multiLine时生效
     */
    outputFormat: {
      type: String as PropType<OutputFormatEnum>,
      default: OutputFormatEnum.SIDE_BY_SIDE
    },
    /**
     * 输出语言：只在mode为multiLine时生效
     */
    language: {
      type: String as PropType<LanguageEnum>,
      default: LanguageEnum.PLAINTEXT
    },
    /** 去除空白字符 */
    trim: {
      type: Boolean,
      default: false
    },
    /** 最大高度 */
    maxHeight: {
      type: String,
      default: undefined
    },
    /** 文件名 */
    filename: {
      type: String,
      default: undefined
    },
    /** 相同部分的代码，最多显示的行数 */
    context: {
      type: [Number, String],
      default: 10
    }
  },
  setup(props) {
    const dialogVisible = ref<boolean>(false);
    const methods = {
      control(status) {
        dialogVisible.value = status
      }
    }
    return () => (
      <div class={styles.resourceProduct}>
        {
          !props.dialog ? <CompareControl
            {
              ...{
                attrs: {
                  mode: props.mode,
                  value: props.value,
                  outputFormat: props.outputFormat,
                  language: props.language,
                  trim: props.trim,
                  maxHeight: props.maxHeight,
                  filename: props.filename,
                  context: props.context
                }
              }
            }
          /> : <div>
            <Dialog
              v-model:visible={dialogVisible.value}
              modal={false}
              width={'30%'}
              append-to-body={false}
              draggable={true}
              v-slots={{
                header: () => {
                  return <p>代码比较插件</p>
                },
                default: () => {
                  return <CompareControl
                  {
                    ...{
                      attrs: {
                        mode: props.mode,
                        value: props.value,
                        outputFormat: props.outputFormat,
                        language: props.language,
                        trim: props.trim,
                        maxHeight: props.maxHeight,
                        filename: props.filename,
                        context: props.context
                      }
                    }
                  }
                />
                },
                footer: () => {
                  return <>
                    <el-button onClick={() => methods.control(false)}>取消</el-button>
                    <el-button onClick={() => methods.control(false)}>确认</el-button>
                  </>
                }
              }}
            >
            </Dialog>
          </div>
        }
      </div>
    )
  }
})
